<template>
  <page-frame bg="#ffffff">
    <div style="color: #fff;font-family: Barlow, sans-serif;">
      <!--移动端适配-->
      <div class="Mobile">
        <div v-if="!isProfile" style="background: #323232">
          <div style="padding: 1.5rem 2rem;">
            <h1 style="font-size: 1.5em;padding-top: 2rem;padding-bottom: 0.5rem;text-align: center;font-weight: 600;">
              {{ userInfo.nickname }}</h1>
            <div style="display: flex;font-size: 16px;padding-top: 3rem">
              <span style="flex: 1">Total USDT</span>
              <span> ¥ {{ userInfo.money || 0 }} </span>
            </div>
            <div style="display: flex;font-size: 16px;padding: 0.5rem 0 1.5rem">
              <span style="flex: 1">Integral</span>
              <span>{{ userInfo.score || 0 }}</span>
            </div>
            <div
                style="margin-bottom: 0.5rem;position: relative;font-size: 0.9rem;background: rgb(0, 0, 0);border-radius: 36px;color:rgb(255, 255, 255);padding: 0.5rem 0.6rem 0.5rem;line-height: 1.3;text-align: center"
                @click="bets(0)">
              未结算
              <img src="@/assets/icons/svg/right.svg" alt=""
                   style="width: 10px;position: absolute;top: 50%;transform: translateY(-50%);right: 10px"
              />
            </div>
            <div
                style="margin-bottom: 0.5rem;position: relative;font-size: 0.9rem;background: rgb(0, 0, 0);border-radius: 36px;color:rgb(255, 255, 255);padding: 0.5rem 0.6rem 0.5rem;line-height: 1.3;text-align: center"
                @click="bets(1)">
              已结算
              <img src="@/assets/icons/svg/right.svg" alt=""
                   style="width: 10px;position: absolute;top: 50%;transform: translateY(-50%);right: 10px"
                   @click="jumpIndex"/>
            </div>
            <div style="display: flex;margin-top:20px">
              <div
                  style="flex: 1;height: 50px;line-height: 50px;text-align: center;font-size: 1rem;border-radius: 6px;margin-right: 20px;    background-color: rgb(49, 194, 124);color:#fff;font-weight: bold;cursor: pointer"
                  @click="go('Recharge')">
                充值
              </div>
              <div
                  style="flex: 1;height: 50px;line-height: 50px;text-align: center;font-size: 1rem;border-radius: 6px;background-color: rgb(0, 0, 0);font-weight: bold;cursor: pointer"
                  @click="go('Extract')">
                提现
              </div>
            </div>
          </div>
          <div style="padding: 2rem 0.8rem;background: #fff;color: rgb(0, 0, 0);">
            <!--个人资料-->
            <div
                style="display: flex;padding: 0.8rem 0.3rem;align-items: center;border-bottom: 1px solid rgb(217, 217, 217);">
              <div style="flex: 1;padding: 0 0.5rem;display: flex;align-items: center" @click="isProfile = !isProfile">
                <img
                    src="@/assets/icons/svg/gerenziliao.svg"
                    alt=""
                    style="
                    z-index: 1;
                    width: 22px;
                    height: 22px;
                    margin-right: 10px;
                    cursor: pointer;
                  "
                />
                个人资料
              </div>
              <img src="@/assets/icons/svg/right-b.svg" alt=""
                   style="width: 10px;margin-right: 0.5rem"/>
            </div>
            <!--邀请码-->
            <div
                style="display: flex;padding: 0.8rem 0.3rem;align-items: center;border-bottom: 1px solid rgb(217, 217, 217);">
              <div style="flex: 1;padding: 0 0.5rem;display: flex;align-items: center" @click="go('InvitationCode')">
                <img
                    src="@/assets/icons/svg/yaoqingma.svg"
                    alt=""
                    style="
                    z-index: 1;
                    width: 22px;
                    height: 22px;
                    margin-right: 10px;
                    cursor: pointer;
                  "
                />
                邀请码
              </div>
              <img src="@/assets/icons/svg/right-b.svg" alt=""
                   style="width: 10px;margin-right: 0.5rem"/>
            </div>
            <!--退出登录-->
            <div
                style="display: flex;padding: 0.8rem 0.3rem;align-items: center;border-bottom: 1px solid rgb(217, 217, 217);"
                @click="handlerMenu(2)">
              <div style="flex: 1;padding: 0 0.5rem;display: flex;align-items: center">
                <img
                    src="@/assets/images/tuichu.png"
                    alt=""
                    style="
                    z-index: 1;
                    width: 22px;
                    height: 22px;
                    margin-right: 10px;
                    cursor: pointer;
                  "
                />
                出去
              </div>
              <img src="@/assets/icons/svg/right-b.svg" alt=""
                   style="width: 10px;margin-right: 0.5rem"/>
            </div>
          </div>
        </div>
        <div style="color: #333;margin-top: 10px;padding:0 1.2rem;position: relative;" v-if="isProfile">
          <img
              src="@/assets/images/back.png"
              alt=""
              width="30"
              height="30"
              style="
                        position: absolute;
                        top: 10px;
                        left: 10px;
                        cursor: pointer;
                      "
              @click="isProfile = !isProfile"
          />
          <div style="display: flex;justify-content: space-between;width: 60%;margin:0 auto;">
            <div v-for="(item,index) in profileList" :key="index" :class="{'profileActive':profileIndex == index}"
                 @click="handlerProfile(index)" style="line-height: 50px">
              {{ item.name }}
            </div>

          </div>
          <div v-if="profileIndex == 0">
            <div style="padding-top: 20px;">
              <h2 style="line-height: 1.4em;font-size: 1.412em;font-weight: 600;margin: 1rem 0px 0.8rem;">Create
                account</h2>
              <div
                  style="font-family: Barlow;font-style: normal;font-weight: 400;font-size: 18px;line-height: 145%;margin-bottom:0.4em;">
                E-Mail
              </div>
              <div
                  style="background-color: rgb(217, 217, 217);padding: 0.55em;color: rgb(155, 155, 155);border-radius: 6px;width: 100%;">
                {{ userInfo.nickname }}
              </div>
            </div>
            <div style="padding-top: 20px">
              <h2 style="line-height: 1.4em;font-size: 1.412em;font-weight: 600;margin: 1rem 0px 0.8rem;">
                Personal
                details</h2>
              <div>
                <div>
                  <div
                      style="font-family: Barlow;font-style: normal;font-weight: 400;font-size: 18px;line-height: 145%;margin: 0px 0px 0.4em;">
                    Name
                  </div>
                  <div
                      style="background-color: rgb(217, 217, 217);padding: 0.55em;color: rgb(155, 155, 155);border-radius: 6px;width: 100%;">
                    wei lun
                  </div>
                </div>
                <div>
                  <div
                      style="font-family: Barlow;font-style: normal;font-weight: 400;font-size: 18px;line-height: 145%;margin: 0.8rem 0 0.4rem;">
                    Last name
                  </div>
                  <div
                      style="background-color: rgb(217, 217, 217);padding: 0.55em;color: rgb(155, 155, 155);border-radius: 6px;width: 100%;">
                    Yong
                  </div>
                </div>
              </div>
              <div
                  style="font-family: Barlow;font-style: normal;font-weight: 400;font-size: 18px;line-height: 145%;margin: 0.8rem 0px 0.4em;">
                Mobile No.
              </div>
              <div style="display: flex">
                <input v-model="name" style="width: 140px;margin-right: 20px"/>
                <input v-model="name" style="flex: 1"/>
              </div>
            </div>
            <div
                style="width: 200px !important;height: 50px;line-height: 50px;text-align: center;font-size: 1rem;border:2px solid #000;color:#000;border-radius: 6px;cursor: pointer;margin-top: 30px"
                v-if="false">
              Save
            </div>
          </div>
          <div v-if="profileIndex == 1">
            <h2 style="line-height: 1.4em;font-size: 1.412em;font-weight: 600;margin: 2rem 0px 0.8rem;">Change
              Password</h2>
            <div style="padding-top: 20px;">
              <div
                  style="font-family: Barlow;font-style: normal;font-weight: 400;font-size: 18px;line-height: 145%;margin: 0px 0px 0.4em;">
                E-Mail
              </div>
              <div
                  style="background-color: rgb(217, 217, 217);padding: 0.55em;color: rgb(155, 155, 155);border-radius: 6px;width: 100%;">
                {{ userInfo.nickname }}
              </div>
            </div>

            <el-form
                label-position="top"
                :model="ruleForm"
                ref="loginForm"
                class="login-form"
                style="margin-top: 0.4rem"
            >
              <el-form-item>
                <div
                    style="font-family: Barlow;font-style: normal;font-weight: 400;font-size: 18px;line-height: 145%;margin: 0px 0px 0.4em;"
                >
                  Code
                </div>
                <div style="display: flex; align-items: center">
                  <div style="width: 49%">
                    <input
                        type="text"
                        v-model.trim="ruleForm.code"
                        autocomplete="off"
                    />
                  </div>
                  <span
                      style="
                      background: #eee;
                      margin-left: 20px;
                      padding: 0 12px;
                      border-radius: 30px;
                      cursor: pointer;
                    "
                      @click="handlerCode"
                  >
                    {{ sendContent }}
                  </span>
                </div>
              </el-form-item>
              <el-form-item>
                <div style="position: relative">
                  <div
                      style="font-family: Barlow;font-style: normal;font-weight: 400;font-size: 18px;line-height: 145%;margin: 0px 0px 0.4em;"
                  >
                    News Password
                  </div>
                  <input
                      :type="isPassword ? 'password' : 'text'"
                      v-model.trim="ruleForm.password"
                      autocomplete="off"
                      style="background: #eee; border: 0; width: 100%"
                  />
                  <img
                      src="@/assets/icons/svg/eye.svg"
                      alt=""
                      width="20"
                      height="20"
                      style="
                        position: absolute;
                        bottom: 10px;
                        right: 10px;
                        cursor: pointer;
                      "
                      @click="isPassword = !isPassword"
                      v-if="isPassword"
                  />
                  <img
                      src="@/assets/icons/svg/eye-no.svg"
                      alt=""
                      width="20"
                      height="20"
                      style="
                        position: absolute;
                        bottom: 10px;
                        right: 10px;
                        cursor: pointer;
                      "
                      @click="isPassword = !isPassword"
                      v-if="!isPassword"
                  />
                </div>
                <div>
                  <div
                      style="font-family: Barlow;font-style: normal;font-weight: 400;font-size: 18px;line-height: 145%;margin: 0.4rem 0px 0.4em;"
                  >
                    Confirm Password
                  </div>
                  <input
                      :type="isConfirmPassword ? 'password' : 'text'"
                      v-model.trim="ruleForm.confirmPassword"
                      autocomplete="off"
                      style="background: #eee; border: 0; width: 100%"
                  />
                  <img
                      src="@/assets/icons/svg/eye.svg"
                      alt=""
                      width="20"
                      height="20"
                      style="
                        position: absolute;
                        bottom: 10px;
                        right: 10px;
                        cursor: pointer;
                      "
                      @click="isConfirmPassword = !isConfirmPassword"
                      v-if="isConfirmPassword"
                  />
                  <img
                      src="@/assets/icons/svg/eye-no.svg"
                      alt=""
                      width="20"
                      height="20"
                      style="
                        position: absolute;
                        bottom: 10px;
                        right: 10px;
                        cursor: pointer;
                      "
                      @click="isConfirmPassword = !isConfirmPassword"
                      v-if="!isConfirmPassword"
                  />
                </div>
              </el-form-item>
              <el-form-item class="btn">
                <div
                    style="width: 100% !important;height: 50px;line-height: 50px;text-align: center;font-size: 1rem;border:2px solid #000;color:#000;border-radius: 6px;cursor: pointer;margin-top: 60px"
                    @click="submitForm">
                  Save
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>

      </div>
      <!--PC端适配-->
      <div class="Pc">
        <div style="background: #323232;padding-top: 1.5rem;">
          <h1 style="font-size: 2.75em;padding-top: 2rem;padding-bottom: 0.5rem;text-align: center;font-weight: 600;">
            {{ userInfo.nickname }}</h1>
          <div
              style="display: flex;justify-content: space-between;align-items: center;padding: 1rem;background-color: rgb(0, 0, 0);color: rgb(213 212 212);max-width: 1200px;margin: 70px auto 0;">
            <div style="flex:1">
              <div style="font-size: 1.12rem;line-height: 1.25;font-weight: lighter;color: rgb(213 212 212);">Total
                USDT
              </div>
              <div style="font-size: 1.12rem;line-height: 1.25;font-weight: 600;color: rgb(255, 255, 255);">¥
                {{ userInfo.money || 0 }}
              </div>
            </div>
            <div style="flex:1">
              <div style="font-size: 1.12rem;line-height: 1.25;font-weight: lighter;color: rgb(213 212 212);">Integral
              </div>
              <div style="font-size: 1.12rem;line-height: 1.25;font-weight: lighter;color: rgb(213 212 212);">
                {{ userInfo.score || 0 }}
              </div>
            </div>
            <div style="flex:1">
              <div
                  style="font-size: 1.12rem;line-height: 1.25;font-weight: lighter;color: rgb(213 212 212);cursor: pointer"
                  @click="bets(0)">
                已结算
              </div>
            </div>
            <div style="flex:1">
              <div
                  style="font-size: 1.12rem;line-height: 1.25;font-weight: lighter;color: rgb(213 212 212);cursor: pointer"
                  @click="bets(1)">
                未结算
              </div>
            </div>
            <div style="flex:1">
              <div
                  style="flex: 1;height: 50px;line-height: 50px;text-align: center;font-size: 1rem;border-radius: 6px;margin-right: 20px;    background-color: rgb(49, 194, 124);color:#fff;font-weight: bold;cursor: pointer"
                  @click="go('Recharge')">
                充值
              </div>
            </div>
            <div style="flex:1">
              <div
                  style="flex: 1;height: 50px;line-height: 50px;text-align: center;font-size: 1rem;border-radius: 6px;background: rgb(52, 52, 52);color:#fff;font-weight: bold;cursor: pointer"
                  @click="go('Extract')">
                提现
              </div>
            </div>
          </div>
        </div>
        <div style="margin: 0 auto;max-width: 1200px;display: flex;">
          <div class="l" style="width:240px;margin-top: 1rem">
            <div style="padding: 0 1rem;" v-for="(item,index) in menuList" :key="index" @click="handlerMenu(index)">
              <span
                  style="display: inline-block;line-height: 25px;font-size: 18px;color: rgb(0, 0, 0);margin:0.8rem 0;cursor: pointer"
                  :class="{'menuActive':menuIndex == index}"
              >{{ item.name }}</span>
            </div>
          </div>
          <div class="r" style="flex: 1;padding-top: 2rem;color:#000">
            <div v-if="menuIndex == 0">
              <h1 style="font-size: 1.5rem;line-height: inherit;font-weight: 600">Profile</h1>
              <div>
                <div style="width: 500px;margin: 0 auto;display: flex">
                  <div v-for="(item,index) in profileList" :key="index"
                       style="flex: 1;text-align: center;margin: 0 0.5rem;padding: 1rem;font-size: 0.8em;"
                       @click="handlerProfile(index)" :class="{'profileActive':profileIndex == index}">
                    {{ item.name }}
                  </div>
                </div>
                <!--Details-->
                <div v-if="profileIndex == 0">
                  <div style="padding-top: 20px;display: flex;gap: 20px;">
                    <div style="flex:1">
                      <h2 style="line-height: 1.4em;font-size: 1.412em;font-weight: 600;margin: 1rem 0px 0.8rem;">Create
                        account</h2>
                      <div
                          style="font-family: Barlow;font-style: normal;font-weight: 400;font-size: 18px;line-height: 145%;margin: 0px 0px 0.2em;">
                        E-Mail
                      </div>
                      <div
                          style="background-color: rgb(217, 217, 217);padding: 0.55em;color: rgb(155, 155, 155);border-radius: 6px;width: 100%;">
                        {{ userInfo.nickname }}
                      </div>
                    </div>
                    <div style="flex:1"></div>
                  </div>
                  <div style="padding-top: 20px">
                    <h2 style="line-height: 1.4em;font-size: 1.412em;font-weight: 600;margin: 1rem 0px 0.8rem;">
                      Personal
                      details</h2>
                    <div style="display: flex;gap: 20px;">
                      <div style="flex: 1">
                        <div
                            style="font-family: Barlow;font-style: normal;font-weight: 400;font-size: 18px;line-height: 145%;margin: 0px 0px 0.2em;">
                          Name
                        </div>
                        <div
                            style="background-color: rgb(217, 217, 217);padding: 0.55em;color: rgb(155, 155, 155);border-radius: 6px;width: 100%;">
                          wei lun
                        </div>
                      </div>
                      <div style="flex: 1">
                        <div
                            style="font-family: Barlow;font-style: normal;font-weight: 400;font-size: 18px;line-height: 145%;margin: 0px 0px 0.2em;">
                          Last name
                        </div>
                        <div
                            style="background-color: rgb(217, 217, 217);padding: 0.55em;color: rgb(155, 155, 155);border-radius: 6px;width: 100%;">
                          Yong
                        </div>
                      </div>
                    </div>
                    <div style="display: flex;gap: 20px;padding-top: 20px">
                      <div style="flex: 1;">
                        <div
                            style="font-family: Barlow;font-style: normal;font-weight: 400;font-size: 18px;line-height: 145%;margin: 0px 0px 0.2em;">
                          Mobile No.
                        </div>
                        <div style="display: flex">
                          <el-input v-model="name" style="width: 140px;margin-right: 20px"/>
                          <el-input v-model="name" style="flex: 1"/>
                        </div>
                      </div>
                      <div style="flex: 1">

                      </div>
                    </div>
                  </div>
                  <div
                      style="width: 200px !important;height: 50px;line-height: 50px;text-align: center;font-size: 1rem;border:2px solid #000;color:#000;border-radius: 6px;cursor: pointer;margin-top: 30px">
                    Save
                  </div>
                </div>
                <div v-if="profileIndex == 1">
                  <h2 style="line-height: 1.4em;font-size: 1.412em;font-weight: 600;margin: 2rem 0px 0.8rem;">Change
                    Password</h2>
                  <div style="padding-top: 20px;display: flex;gap: 20px;">
                    <div style="flex:1">
                      <div
                          style="font-family: Barlow;font-style: normal;font-weight: 400;font-size: 18px;line-height: 145%;margin: 0px 0px 0.2em;">
                        E-Mail
                      </div>
                      <div
                          style="background-color: rgb(217, 217, 217);padding: 0.55em;color: rgb(155, 155, 155);border-radius: 6px;width: 100%;">
                        {{ userInfo.nickname }}
                      </div>
                    </div>
                    <div style="flex:1"></div>
                  </div>

                  <el-form
                      label-position="top"
                      :model="ruleForm"
                      ref="loginForm"
                      class="login-form"
                      style="margin-top: 50px"
                  >
                    <el-form-item>
                      <div
                          style="
                    font-size: 16px;
                    color: #333;
                    line-height: 24px;
                    margin-bottom: 4px;
                  "
                      >
                        Code
                      </div>
                      <div style="display: flex; align-items: center">
                        <div style="width: 49%">
                          <input
                              type="text"
                              v-model.trim="ruleForm.code"
                              autocomplete="off"
                          />
                        </div>
                        <span
                            style="
                      background: #eee;
                      margin-left: 20px;
                      padding: 0 12px;
                      border-radius: 30px;
                      cursor: pointer;
                    "
                            @click="handlerCode"
                        >
                    {{ sendContent }}
                  </span>
                      </div>
                    </el-form-item>
                    <el-form-item>
                      <div style="display: flex">
                        <div style="flex: 1; margin-right: 30px; position: relative">
                          <div
                              style="
                        font-size: 16px;
                        color: #333;
                        line-height: 24px;
                        margin-bottom: 4px;
                      "
                          >
                            News Password
                          </div>
                          <input
                              :type="isPassword ? 'password' : 'text'"
                              v-model.trim="ruleForm.password"
                              autocomplete="off"
                              style="background: #eee; border: 0; width: 100%"
                          />
                          <img
                              src="@/assets/icons/svg/eye.svg"
                              alt=""
                              width="20"
                              height="20"
                              style="
                        position: absolute;
                        bottom: 10px;
                        right: 10px;
                        cursor: pointer;
                      "
                              @click="isPassword = !isPassword"
                              v-if="isPassword"
                          />
                          <img
                              src="@/assets/icons/svg/eye-no.svg"
                              alt=""
                              width="20"
                              height="20"
                              style="
                        position: absolute;
                        bottom: 10px;
                        right: 10px;
                        cursor: pointer;
                      "
                              @click="isPassword = !isPassword"
                              v-if="!isPassword"
                          />
                        </div>
                        <div style="flex: 1">
                          <div
                              style="
                        font-size: 16px;
                        color: #333;
                        line-height: 24px;
                        margin-bottom: 4px;
                      "
                          >
                            Confirm Password
                          </div>
                          <input
                              :type="isConfirmPassword ? 'password' : 'text'"
                              v-model.trim="ruleForm.confirmPassword"
                              autocomplete="off"
                              style="background: #eee; border: 0; width: 100%"
                          />
                          <img
                              src="@/assets/icons/svg/eye.svg"
                              alt=""
                              width="20"
                              height="20"
                              style="
                        position: absolute;
                        bottom: 10px;
                        right: 10px;
                        cursor: pointer;
                      "
                              @click="isConfirmPassword = !isConfirmPassword"
                              v-if="isConfirmPassword"
                          />
                          <img
                              src="@/assets/icons/svg/eye-no.svg"
                              alt=""
                              width="20"
                              height="20"
                              style="
                        position: absolute;
                        bottom: 10px;
                        right: 10px;
                        cursor: pointer;
                      "
                              @click="isConfirmPassword = !isConfirmPassword"
                              v-if="!isConfirmPassword"
                          />
                        </div>
                      </div>
                    </el-form-item>
                    <el-form-item class="btn">
                      <div
                          style="width: 200px !important;height: 50px;line-height: 50px;text-align: center;font-size: 1rem;border:2px solid #000;color:#000;border-radius: 6px;cursor: pointer;margin-top: 30px"
                          @click="submitForm">
                        Save
                      </div>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </page-frame>
</template>

<script>
import {reactive, ref, toRefs, getCurrentInstance} from "vue";

export default {
  name: "UserInfo",
  setup() {
    /* 全局挂载utils工具类 start */

    const {proxy} = getCurrentInstance();
    const {$api, $common, $validate, $router, $elUtils, $tokenUtils, $ext} =
        proxy;

    /* 全局挂载 end */

    const loginForm = ref(null);
    const state = reactive({
      menuList: [{
        name: '个人资料'
      }, {
        name: '邀请码'
      }, {
        name: '出去'
      }],
      menuIndex: 0,
      profileList: [
        {
          name: 'Details'
        }, {
          name: 'Password'
        }
        // , {
        //   name: 'Change Email'
        // }
      ],
      profileIndex: 0,
      name: 'xxxx',
      ruleForm: {
        username: "",
        password: "",
        confirmPassword: "",
        code: "",
      },
      isPassword: true,
      isConfirmPassword: true,
      sendContent: "Send Code",
      smsWait: 0,
      sendClass: false,
      userInfo: $common.getKeyVal("system", "userInfo", true),
      isProfile: false
    });
    console.log('userInfo', state.userInfo)
    const joinNow = () => {
      $router.push({name: "Register"});
    };

    const retrievePassword = () => {
      $router.push({name: "RetrievePassword"});
    };

    // 菜单切换
    const handlerMenu = (index) => {
      state.menuIndex = index
      if (index == 1) {
        $router.push({name: 'InvitationCode'});
      } else if (index == 2) {
        $ext.loginOut()
      }
    }
    // 个人资料切换
    const handlerProfile = (index) => {
      state.profileIndex = index
    }

    const submitForm = async () => {

      if ($validate.isNull(state.ruleForm.code)) {
        $elUtils.warnMsg("Code is not correct, please check.");
        return;
      }
      var pattern =
          /^(?![A-z0-9]+$)(?=.[^%&',;=?$\x22])(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,20}$/;
      if (
          $validate.isNull(state.ruleForm.password) ||
          !pattern.test(state.ruleForm.password)
      ) {
        $elUtils.warnMsg(
            "The password must have 8-20 characters, including uppercase and lowercase letters, numbers and special characters."
        );
        return;
      } else if (state.ruleForm.password !== state.ruleForm.confirmPassword) {
        $elUtils.warnMsg(
            "The password and confirmation password must be consistent."
        );
      }
      const paramObj = {
        username: state.userInfo.nickname,
        newpassword: state.ruleForm.password,
        captcha: state.ruleForm.code,
        type: "email",
      };
      $api
          .userResetpwd(paramObj)
          .then((res) => {
            if (res.code == 1) {
              $router.push({name: "Login"});
              $elUtils.successMsg(res.msg);
            } else {
              $elUtils.errorMsg(res.msg);
            }
          })
          .catch((err) => {
            $elUtils.errorMsg(err.msg);
          });
    };

    // 发送验证码
    const handlerCode = () => {
      if (state.smsWait !== 0) {
        return false;
      }

      $api
          .emsSend({email: state.userInfo.nickname, event: "resetpwd"})
          .then((res) => {
            if (res.code == 1) {
              state.smsWait = 60;
              waitSms();
              state.smsInterval = setInterval(function () {
                waitSms();
              }, 1000);
            } else {
              $elUtils.warnMsg(res.msg);
              return;
            }
          });
    };

    // 验证码倒计时
    const waitSms = () => {
      state.smsWait--;
      if (state.smsWait === 0) {
        clearInterval(state.smsInterval);
        state.sendContent = "Send Code";
        state.sendClass = false;
      } else {
        state.sendClass = true;
        state.sendContent = state.smsWait;
      }
    };

    // 跳转注单
    const bets = (type) => {
      $router.push({
        path: "/Bets",
        query: {
          type: type
        }
      });
    };

    const go = (name) => {
      $router.push({name: name});
    }

    return {
      ...toRefs(state),
      loginForm,
      submitForm,
      joinNow,
      retrievePassword,
      handlerMenu,
      handlerProfile,
      handlerCode,
      bets,
      go
    };
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.menuActive {
  border-bottom: 3px solid rgb(218, 0, 0);
  font-weight: bold;
}

.profileActive {
  border-bottom: 3px solid rgb(218, 0, 0);
  font-weight: bold;
}

input {
  width: 100%;
  height: 40px;
  border-radius: 6px;
  padding-left: 10px;
  font-size: 16px;
  color: #333333;
  background: #eee;
  border: 0;
}

input:focus,
input:focus-visible {
  background-color: rgb(255, 255, 255) !important;
  border: 2px solid rgb(33, 138, 251) !important;
}

.input__inner {
  width: 100%;
  border: 0 !important;
  background: #eee !important;
}

.Pc {
  .login-form {
    width: 100%;

    .username {
    }

    .password {
      margin: 20px 0;
    }

    .btn {
      .submit {
        background-color: rgba(255, 45, 137, 1);
        color: #ffffff;
        padding: 14px 20px;
        font-size: 16px;
      }
    }
  }
}
</style>
